<template>
  <el-container style="background-image: url(../../static/img/loginBg.png);height: 100%;">
      <el-header>
		  <img src="../../static/img/loginHeader.png" style="width: 100%;height: 90px;"/>
	  </el-header>
      <el-main  style="height: 700px;">
		  <div style="width: 600px;height:400px;float:left;margin-top: 10px;">
		    <img src="../../static/img/loginImg.png" style="width: 412px;height: 440px;float: right;margin-top: 70px;"/>
		  </div>
		  <div style="width: 700px;height:400px;float:left;">
			  <h3 style="margin-top: 100px;margin-bottom: 50px;margin-left: 250px;color: #052D8B;">12123驾驶员登录</h3>
			  <el-form ref="form" :model="driver":rules="rules" label-width="80px" style="width: 450px;margin-left: 150px;font-weight: 700;">
			    <el-form-item :label="loginForm.nameTitle" prop="cardId">
			      <el-col :span="22">
			         <el-input v-model="driver.cardId"></el-input>
			      </el-col>
			    </el-form-item>
			    <el-form-item :label="loginForm.passTitle" prop="password">
			       <el-col :span="loginForm.num">
			         <el-input v-model="driver.password" type="password" ></el-input>
			       </el-col>
			       <el-col :span="11">
			          <el-button v-show="loginForm.ok" @click="sendCode()">发送验证码</el-button>
			       </el-col>
			    </el-form-item>
			    <el-form-item>
			       <el-button size="small" round @click="AccountLogin()">密码验证登录</el-button>
			       <el-button size="small" round @click="phoneLogin()">短信验证登录</el-button>
			  				 <el-button size="small" round @click="policeLogin()">警员登录</el-button>
			       <br>
			       <el-button size="small" round @click="ToRegister()">去注册->GO</el-button>
			       <el-button size="small" round @click="forget()">忘记密码->GO</el-button>
			    </el-form-item>
			    <el-form-item style="margin-top: 20px;margin-left: 50px;">
			      <el-button type="primary" @click="login()" style="font-weight: 700;">登录</el-button>
			      <el-button style="font-weight: 700;">取消</el-button>
			    </el-form-item>
			  </el-form>
		  </div>
      </el-main>
      <el-footer style="width: 100%;height: 50px;">
         <img src="../../static/img/loginFoot.png" style="width: 100%;height: 150px;"/>
      </el-footer>
  </el-container>
</template>

<script>
//引入工具对象myUtil.js  就可以调用其对象myUtil.url和方法myUtil.add
import myUtil from '../util/myUtil'
//引入axios模块
import axios from 'axios'
export default {
    data() {
      return {
        driver: {
          cardId: '',
          password: '',
          confirmCode:""
        },
        loginForm:{
          title:"密码验证登录",
          nameTitle:"账号",
          passTitle:"密码",
          ok:false,
          num:22
        },
        rules: {
           cardId: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 11, max: 18, message: '身份证长度在15到18位，电话号码11位', trigger: 'blur' }
           ],
           password: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 4, max: 12, message: '密码长度在8到12位，验证码4位', trigger: 'blur' }
           ],
         },
      }
    },
    methods: {
      login() {
        var mythis=this;
        if(this.loginForm.passTitle=="验证码"){//验证码登录
          console.log('手机验证登录!');
          if(this.driver.password==this.driver.confirmCode){
            console.log('验证码正确!')
            //根据电话号码获取用户信息  并存入到driver对象
            axios({
              headers:{
               'Content-Type':"application/json"
              },
               method:"get",
               url:myUtil.url+"/api/getDriverByPhone/"+mythis.driver.cardId,
             }).then(function(rs){
               if(rs.data.driver != null){
                 //第一种本地存储 将登录成功的返回数据 存储在前端本地
                 localStorage.removeItem("loginPoliceCardId")
                 localStorage.setItem("loginDriverCardId",rs.data.driver.cardId);
                 console.log(rs.data.driver);
                 //然后跳到启动主页面
                 mythis.$router.push("indexTrafficsys");
                 return;
               }else{
				   mythis.$alert("对不起！该手机号还未注册！")
			   }
              })
          }else{
             mythis.$alert("验证码错误！");
            return;
          }
        }else{//密码登录
          console.log(this.driver.cardId.length)
          if(this.driver.cardId.length <= 11){//电话号码登录
            axios({
               headers:{
                'Content-Type':"application/json"
               },
               method:"post",
               url:myUtil.url+"/api/driverLogin",
               data:{phone:mythis.driver.cardId,password:mythis.driver.password}
             }).then(function(rs){
               console.log(rs.data.info);
               if(rs.data.info=="登录成功"){
                 console.log(rs.data.driver.cardId);
                 //第一种本地存储 将登录成功的返回数据 存储在前端本地
                 localStorage.removeItem("loginPoliceCardId")
                 localStorage.setItem("loginDriverCardId",rs.data.driver.cardId);
                 //然后跳到启动主页面
                 mythis.$router.push("indexTrafficsys");
               }else{
				   mythis.$alert("登录失败，密码错误！")
			   }
              })
          }else{//身份证号码登录
            axios({
               headers:{
                'Content-Type':"application/json"
               },
               method:"post",
               url:myUtil.url+"/api/driverLogin",
               data:{cardId:mythis.driver.cardId,password:mythis.driver.password}
             }).then(function(rs){
               console.log(rs.data.info);
               if(rs.data.info=="登录成功"){
                 //第一种本地存储 将登录成功的返回数据 存储在前端本地
                 localStorage.removeItem("loginPoliceCardId")
                 localStorage.setItem("loginDriverCardId",rs.data.driver.cardId);
                 //然后跳到启动主页面
                 mythis.$router.push("indexTrafficsys");
               }else{
				   mythis.$alert("登录失败，密码错误！")
			   }
              })
          }
        }
      },
      //发送短信验证码http://localhost:8080/api/sendMessage?phone=15730593398
      sendCode(){
        console.log('sendMessage!');
        console.log(this.driver);
        var mythis=this;
        axios({
           headers:{
            'Content-Type':"application/json"
           },
           method:"post",
           url:myUtil.url+"/api/sendMessage",
           data:mythis.driver.cardId
         }).then(function(rs){
           console.log(rs.data.info);
           if(rs.data.info=="短信发送成功"){
             //第一种本地存储 将登录成功的返回数据 存储在前端本地
             mythis.driver.confirmCode=rs.data.code;
             console.log(mythis.driver.confirmCode);
           }
       })
      },
      ToRegister(){
        this.$router.push("registerTrafficsys");
      },
      forget(){
        this.$router.push("findPass");
      },
       phoneLogin(){//短信发送登录
        this.loginForm.nameTitle="手机号码",
        this.loginForm.passTitle="验证码",
        this.loginForm.ok=true,
        this.loginForm.num=11
       },
		policeLogin(){
		this.$router.push("loginTrafficsys2");
		},
       AccountLogin(){//密码登录
        this.loginForm.nameTitle="账号",
        this.loginForm.passTitle="密码",
        this.loginForm.ok=false,
        this.loginForm.num=22
       }
    }
  }
</script>

<style>

</style>
